<template>
  <div class="dashboard-box">
    <div class="welcome-tps" >
     智能工作辅助系统管理中心{{title}}
    </div>
    <div class="web-size-info-box" >
        <div class="card">
          <el-card style="max-width: 200px;" shadow="always">
            <template #header>
              <div class="card-header">
                <span>网站访问量</span>
              </div>
            </template>
            <p class="card-text" >{{ viewCount }}</p>
          </el-card>
        </div>
        <div class="card">
          <el-card style="max-width: 200px;" shadow="always">
            <template #header>
              <div class="card-header">
                <span>注册用户</span>
              </div>
            </template>
            <p class="card-text" >{{ userCount }}</p>
          </el-card>
        </div>
        <div class="card">
          <el-card style="max-width: 200px;" shadow="always">
            <template #header>
              <div class="card-header">
                <span>文章总数</span>
              </div>
            </template>
            <p class="card-text" >{{ articleCount }}</p>
          </el-card>
        </div>
        <div class="card">
          <el-card style="max-width: 200px;" shadow="always">
            <template #header>
              <div class="card-header">
                <span>评论总数</span>
              </div>
            </template>
            <p class="card-text" >{{ commentCount }}</p>
          </el-card>
        </div>
    </div>


    <div class="web-chart-box" ref="charts">
      <div class="liquid-chart">

      </div>

      <div class="liquid-chart">

      </div>

    </div>


  </div>
</template>


<script setup lang="ts">
import 'echarts-liquidfill'
import * as echarts from 'echarts';
import {getArticleCount, getUserCount,getCommentCount,getViewCount,listComments,getDiary,success_code} from "../../utils/api";
import {onMounted, reactive, ref} from "vue";
import {result} from "../../utils/type";

let charts = ref();
let articleCount=ref<number>(0)
let userCount=ref<number>(0)
let commentCount=ref<number>(0)
let viewCount=ref<number>(0)
let diary=ref<any>()
let title=ref<any>()
interface CountResult {
  code: any;
  data: any; // 假设data是number类型，根据实际情况调整

}
function getLiquid(){
  let mycharts = echarts.init(charts.value);
  //设置实例的配置项
  mycharts.setOption({
    //标题组件
    backgroundColor: "#000", //背景色
    title: {
      text: "5555555",
      textStyle: {
        fontSize: 20,
        fontFamily: "Microsoft Yahei",
        fontWeight: "normal",
        color: "#fff",
      },
      x: "center",
      y: "48%",
    },

    series: [
      {
        type: "liquidFill", //配置echarts图类型
        radius: "60%",
        center: ["50%", "50%"],
        //  shape: 'roundRect',// 设置水球图类型（矩形[rect]，菱形[diamond]，三角形[triangle]，水滴状[pin],箭头[arrow]...） 默认为圆形
        data: [0.2,0.5],  //设置波浪的值
        //waveAnimation:false, //静止的波浪
        backgroundStyle: {
          borderWidth: 1,
          color: "transparent",//水球图内部背景色
        },
        outline: {
          borderDistance: 10,
          itemStyle: {
            borderWidth: 4,
            borderColor: "#5acef2",
          },
        },
        color: [ //波浪颜色
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: "rgba(6, 187, 112, 0.3)", //下
              },
              {
                offset: 0,
                color: "rgba(11, 201, 199, 0.3)",
              },
            ],
            globalCoord: false,
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: "rgba(6, 187, 112, 1)", //下
              },
              {
                offset: 0,
                color: "rgba(11, 201, 199, 1)",
              },
            ],
            globalCoord: false,
          },
        ],
        label: {
          normal: "",
            formatter: "",

        },
      },

    ],


  })
}
function listCount() {


  getArticleCount().then(result=> {
    const typedResult = result as CountResult;
    if (typedResult.code  === success_code) {
      articleCount.value = typedResult.data;
    }
  });
  getUserCount().then(result => {
    const typedResult = result as CountResult;
    if (typedResult.code === success_code) {
      userCount.value = typedResult.data;
    }
  });


  getCommentCount().then(result => {
    const typedResult = result as CountResult;
    if (typedResult.code === success_code) {
      commentCount.value = typedResult.data;
    }
  });

  getViewCount().then(result => {
    const typedResult = result as CountResult;
    if (typedResult.code === success_code) {
      viewCount.value = typedResult.data.web_size_view_count;
    }
  })

}

function listDiary(){
  getDiary().then(result=> {

    diary.value=result.data
    title.value = diary.value[0].title

  })
}
onMounted(() => {
  listCount()
  getLiquid()
  listDiary()
});
</script>

<style scoped >
.dashboard-box{

}
.web-size-info-box{
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px;
}
.welcome-tps{
  display: flex;
  margin-top: 10px;
  align-items: center;
  height: 50px;
  font-size: 30px;
  font-family:字体视界-小南同学,serif;
}
/* 默认情况下，一行4个模块 */
.card {
  width: calc(25% - 16px); /* 减去间隔的宽度 */
  margin: 8px;
}

/* 屏幕宽度小于1200px时，一行3个模块 */
@media (max-width: 700px) {
  .card {
    width: calc(33.333% - 16px);
    margin: 8px;
  }
}

/* 屏幕宽度小于992px时，一行2个模块 */
@media (max-width: 500px) {
  .card {
    width: calc(50% - 16px);
    margin: 8px;
  }
}

/* 屏幕宽度小于768px时，一行1个模块 */
@media (max-width: 300px) {
  .card {
    width: calc(100% - 16px);
    margin: 8px;
  }
}
.card-text{
  text-align: center;
  color: #3498db;
  font-size: 30px
}
.web-chart-box {
  width: 200px;
  height: 270px;
}
</style>